/*
 * @Descripttion: 
 * @version: 
 * @Author: kl2018
 * @Date: 2020-04-30 17:24:44
 * @LastEditors: kl2018
 * @LastEditTime: 2020-06-04 17:25:17
 */
import React, { Component } from "react";
import { SearchBar, Progress, Tools } from "weaver-mobile";
import { ListViewPage } from 'weaver-mobile-page';
import { inject, observer } from "mobx-react"
import { withRouter } from 'react-router-dom';

const getLabel = Tools.getLabel;

@withRouter
@inject("moreListStore")
@observer
export default class WorkflowTableDialogComponent extends Component {

  componentDidMount() {
    const { moreListStore, formData, docCountData, location } = this.props;
    const type = location.query.echartType;
    if (type == "1") {
      moreListStore.getList(formData);
    } else {
      const echartType = (Number.parseInt(type) - 1);
      moreListStore.getList(docCountData, "", echartType)
    }

  }

  render() {
    const { moreListStore, formData, location = { query: { echartType: '' } } } = this.props;
    const { list, getList } = moreListStore;
    const type = location.query && location.query.echartType || '';
    const echartType = (Number.parseInt(type) - 1);
    return (
      <div className="odoc-report-moreWorkflow">
        <SearchBar
          placeholder={getLabel("500351", "请输入关键字")}
          onSubmit={v => getList(formData, v, echartType)}
        />
        <ListViewPage.Normal
          className="wm-demo-list-view-page"
          store={list}
          getTemplate={this.getTemplate}
        />
      </div>
    )
  }

  getTemplate() {
    const newTemplate = {
      default: [
        {
          key: 'col1',
          style: { flex: 'none' },
          render(item) {
            if (item.workflowidspan.length > 4) {
              item.workflowidspan = item.workflowidspan.slice(0, 4) + "..."
            }
            return <div style={{ width: "70px" }}>{item.workflowidspan}</div>
          },
        },
        {
          key: 'col2',
          render(item) {
            const percent = item.num / item.totalNumber * 100;
            return <Progress percent={percent} position="normal" appearTransition />
          },
        },
        {
          key: 'col3',
          render(item) {
            return <div>{item.num}</div>
          }
        },
      ],
    };
    return newTemplate;
  }

}